@extends('self_service_end.layouts.default')
{{-- content_header --}}

@section('container')

<!-- Notifications -->
@include('back_end.layouts.notifications')
<!-- ./ notifications -->
<section class="col-lg-9 col-md-9"> @foreach($entries as $entry)
  @include('self_service_end.layouts._food_div', array('entry'=>$entry))
  @endforeach
  <div class="col-lg-12 col-md-12" style=" text-align: center; "> {{ $entries->links('pagination::self_service') }} </div>
</section>
<!-- /.content -->
<section class="col-lg-3 col-md-3">
  <div class="panel panel-danger"  style="background-color:rgba(255, 255, 255, 0.8);height:800px; margin:0px;font-size:16px;">
    <div class="panel-heading">
      <h3 class="panel-title"><i class="glyphicon glyphicon-shopping-cart"></i>&nbsp;&nbsp;购物车</h3>
    </div>
    <div class="panel-body">
      <table class="table bg-warning" style="color:#900; vertical-align:middle;">
        <thead>
          <tr>
            <td>名称</td>
            <td class="text-center">数量</td>
            <td class="text-right">单价<small>(元)</small></td>
            <td class="text-right">合计<small>(元)</small></td>
            <td class="text-center">操作</td>
          </tr>
        </thead>
        <tbody class="order-list">
        </tbody>
      </table>
      <div class="col-lg-12 col-md-12 alert alert-info text-right"> 总计：<span class="fa fa-cny" style="font-size:14px;"></span>&nbsp;&nbsp;<span class="total-money">0</span>元 </div>
      <div class="col-lg-6 col-md-6 text-left">
        <button class="btn btn-lg btn-info ui-btn-left btn-clear-order-list" ><span class="glyphicon glyphicon-trash"></span>&nbsp;&nbsp;清空订单</button>
      </div>
      <div class="col-lg-6 col-md-6 text-right"> <a class="btn btn-lg btn-danger ui-btn-right btn-do-order" href="#" id="windowsprint"><span class="glyphicon glyphicon-print"></span>&nbsp;&nbsp;支付订单</a> </div>
      <div id="windowshide" style="visibility:hidden"></div>
    </div>
  </div>
</section>
<!-- /pagination -->

<div class="modal fade" id="foodDetailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content thumbnail">
      <div class="modal-header" style="color:#900;">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h2 class="modal-title" id="myModalLabel">菜品详细</h2>
      </div>
      <div class="modal-body" style="color:#900;">


      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-lg btn-default" data-dismiss="modal">关闭</button>
        <a type="button" class="btn btn-lg btn-danger btn-buy">加入订单</a>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="chose_pay" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="margin-top: 4em">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">选择支付方式</h4>
      </div>
      <div class="modal-body" style="text-align: center">
        <a id="alipay" href="#"><button type="button" class="btn btn-danger btn-lg"  >支付宝</button></a>
        <button type="button" class="btn btn-primary btn-lg" data-dismiss="modal" id="windowsprint">校园卡</button>
      </div>

    </div>
  </div>
</div>


@stop

@section('scripts')
<script type="text/javascript">
    $(function(){

        var orderLimit = 20;
        var orderLabel = 'order';
        var orderListDom = $('tbody.order-list');
        var orderTotalMoneyDom = $('.total-money');
        var doOrderUrl = "{{ URL::to('self_service_end/add_order') }}?_token={{{ csrf_token() }}}";
        var getFoodDetail = "{{ URL::to('self_service_end/foods/detail') }}";

        if(GetQueryString('clear_cache') == 1){
            localStorage.clear();
        }

        var orderList;

        orderList = JSON.parse(localStorage.getItem(orderLabel));

        orderList = (orderList == null) ? new Array() : orderList;
        refreshOrderList(orderList);

        // 将菜品加入订单
        $('a.btn-buy').on('click', function(event){
            $('#foodDetailModal').modal('hide');

            var order = new Array(5);
            order[0] = $(this).parents('.thumbnail').find('.food-name').attr('data-id');
            order[1] = $(this).parents('.thumbnail').find('.food-name').html();
            order[3] = $(this).parents('.thumbnail').find('.food-price').html();

            addOrderToList(order, orderList);
            storage(orderList);
            refreshOrderList(orderList);
        });
        //将菜品移除订单
        $(document).on('click', '.btn-remove-order', function(event){
            var order = new Array(1);
            order[0] = $(this).attr('data-id');

            removeOrderToList(order, orderList);
            storage(orderList);
            refreshOrderList(orderList);
        });

        //清空订单列表
        $('.btn-clear-order-list').on('click', function(event){
            orderList = new Array();
            storage(orderList);
            refreshOrderList(orderList);
        });

        //下单
//        $('.btn-do-order').on('click', function(event){
//            $foodIds = new Array();
//            $counts = new Array();
//
//            for(var i=0;i<orderList.length;i++){
//                $foodIds[i] = orderList[i][0];
//                $counts[orderList[i][0]] = orderList[i][2];
//            }
//            $totalPrice = $(this).parent().parent().find('.total-money').html();
//
//            var data = {
//                _token:'{{{ csrf_token() }}}',
//                food_ids: $foodIds,
//                counts: $counts,
//                total_price: $totalPrice
//            };
//            $.ajax({
//                url: doOrderUrl,
//                type: 'POST',
//                data: data
//            }).done(function( data ) {
//                    orderList = new Array();
//                    storage(orderList);
//                    refreshOrderList(orderList);
//                });
//        });

        //点击显示详情
        $('.btn-food-detail').on('click', function(event){
            $foodId = $(this).attr('data-id');

            $.ajax({
                url: getFoodDetail+'/'+$foodId,
                type: 'GET',
                dataType: 'json'
            }).done(function( data ) {
                    if(data.result){
                        $('#foodDetailModal').modal('show');
                        $('#foodDetailModal .modal-body').html(foodHtml(data.entry, data.thumbs));
                    }
                });
        });

        function addOrderToList(order, orderList){
            var hasOrder = false;
            for(var i=0;i<orderList.length;i++){
                if(orderList[i][0] == order[0]){
                    orderList[i][2]++;
                    orderList[i][4] = floatToMoney(orderList[i][3] * parseFloat(orderList[i][2]), 2);
                    hasOrder = true;
                }
            }
            if(!hasOrder){
                order[2] = 1;
                order[4] = floatToMoney((order[2] * parseFloat(order[3])), 2);
                orderList.push(order);
            }
        }

        function removeOrderToList(order, orderList){
            var hasOrder = false;
            for(var i=0;i<orderList.length;i++){
                if(orderList[i][0] == order[0]){
                    orderList.splice(i, 1);
                }
            }
        }

        function storage(orderList){
            localStorage.removeItem(orderLabel);
            localStorage.setItem(orderLabel, JSON.stringify(orderList));
        }

        function refreshOrderList(orderList){
            orderListDom.children().remove();
            var totalMoney = 0;
            for(var i=0;i<orderList.length;i++){
                totalMoney += moneyToFloat(orderList[i][4]);
                orderListDom.append(orderHtml(orderList[i]));
            }
            orderTotalMoneyDom.html(floatToMoney(totalMoney, 2));

            refreshOrderData(orderList, floatToMoney(totalMoney, 2));
        }

        function orderHtml(order){
            return '\
            <tr class="order-entity" data-id="'+order[0]+'">\
                <td>'+order[1]+'</td>\
                <td class="text-right ">'+order[2]+'</td>\
                <td class="text-right">'+order[3]+'</td>\
                <td class="text-right">'+order[4]+'</td>\
                <td class="text-center"><button class="btn btn-remove-order btn-lg btn-danger" data-id="'+order[0]+'"><span class="glyphicon glyphicon-trash"></span></button></td>\
            </tr>\
            ';
        }

        function foodHtml(food, thumbs){

            var foodDom = '\
                <div><img src="{{ URL::to('file/image_crop/4/3/570?name=') }}'+((thumbs.length>0) ? thumbs[0] : 'default_food.jpg' )+'" /></div>\
                <h3><span class="food-name" data-id="'+food.id+'">'+food.name+'</span></h3>\
                <h3><span class="fa fa-cny" style="font-size:14px;"></span>&nbsp;&nbsp;<span class="food-price">'+food.price+'</span> 元</h3>\
                <h4>'+food.description+'</h4>\
            ';
            return foodDom;
        }

        function refreshOrderData(orderList, totalPrice){
            var orderDataDom = $('#windowshide');
//            var orderData = {
//                errmsg: "ok",
//                header_title: "欢迎光临",
//                name: "华侨大学餐厅",
//                footer_title: "谢谢惠顾",
//                total_price: totalPrice + "元",
//                foods: new Array()
//            };
//
//            for(var i=0;i<orderList.length;i++){
//                orderData.foods.push({
//                    name: orderList[i][1],
//                    price: orderList[i][3],
//                    count: orderList[i][2],
//                    money: orderList[i][4]
//                });
//            }

            $foodIds = new Array();
            $counts = new Array();

            for(var i=0;i<orderList.length;i++){
                $foodIds[i] = orderList[i][0];
                $counts[i] = orderList[i][2];
            }
            $totalPrice = $('.total-money').html();

            var orderData = {
                food_ids: $foodIds,
                counts: $counts,
                total_price: $totalPrice
            };

            orderDataDom.html(JSON.stringify(orderData));
        }

        //获取URL参数
        function GetQueryString(name)
        {
            var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r!=null) return unescape(r[2]); return null;
        }

    });

</script>
@stop